import React, { Component } from 'react';
import {
    StyleSheet, TouchableHighlight,
    Text,
    View, Button, Image, WebView
} from 'react-native';
import { connect } from 'react-redux';
import HeaderBar from '../../common/headerBar';
import { Variable } from '../../variables';
import DeviceRn from '../../components/Tools/device';
let DevWH = DeviceRn().getWidHig();

class InfoScreen extends Component {
    static params = {
        Image: require('../../assets/images/news.png'),
        msg: '资讯',
        header: null
    };
    static navigationOptions = ({ navigation, screenProps }) => HeaderBar(screenProps, InfoScreen.params)

    constructor(props) {
        super(props);
        this.state = {};
    }
    componentWillReceiveProps(nextProps) {
        this.netInfo = nextProps.status;
    }

    _itemClick(wz) {
        let { navigate } = this.props.navigation;
        switch(wz){
            case 'dlt':
            navigate('infoItem',{tag: '19'});
            break;
            case 'pl':
            navigate('infoItem',{tag: '20'});
            break;
            case 'qxc':
            navigate('infoItem',{tag: '21,22'});
            break;
        }
    }

    renderItem(title = {}, msg = "", bgc) {
        return (
            <TouchableHighlight style={styles.thc} underlayColor={bgc} activeOpacity={0.75} onPress={() => this._itemClick(msg)} >
                <View style={[styles.sscb, { backgroundColor: bgc }]}>
                    <Text style={styles.btnt}>{title}</Text>
                </View>
            </TouchableHighlight>
        )
    }

    render() {
        return (
            <View style={styles.home}>
                {this.renderItem('超级大乐透', 'dlt', "#cfa377")}
                {this.renderItem('排列3/排列5', 'pl', "#ce4343")}
                {this.renderItem('七星彩与其他玩法', 'qxc', "#c7bd3a")}
            </View>
        );
    }
}
mapStoreState = (store) => ({
    status: store.netInfo.status,
});
export default connect(mapStoreState)(InfoScreen);

const styles = StyleSheet.create({
    home: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-start',
        backgroundColor: '#f0f0f0',
        marginVertical: 0,
        paddingTop: 13
    },
    thc: { flex: 0, overflow: 'hidden', borderRadius: 12, marginBottom: 13 },
    sscb: {
        flex: 0,
        alignItems: 'flex-start',
        justifyContent: 'center',
        width: DevWH.sW - 16,
        height: 56,
        overflow: 'hidden',
        borderRadius: 12,
        paddingLeft: 13
    },
    btnt: {
        fontSize: 18,
        fontWeight: '500',
        color: '#fff'
    }
});